<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
				color: #fff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}
    </style>
    <script src="src/three.js"></script>
    <script src="src/OrbitControls.js"></script>
    <script src="src/GLTFLoader.js"></script>
    <script src="src/Tween.min.js"></script>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var scene, renderer, camera, controller;
    var model, skeleton, mixer, clock;
    var crossFadeControls = [];
    var idleAction, walkAction, runAction, poseAction;
    var idleWeight, walkWeight, runWeight;
    var actions, settings;
    var singleStepMode = false;
    var sizeOfNextStep = 0;
    var selected_index = 0;
    var actions = []

    init()

    function init(){
        var container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 3, 3, - 3 );
        camera.lookAt( 0, 1, 0 );

        clock = new THREE.Clock();

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );

        var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
        hemiLight.position.set( 0, 20, 0 );
        scene.add( hemiLight );

        var dirLight = new THREE.DirectionalLight( 0xffffff );
        dirLight.position.set( - 3, 10, - 10 );
        dirLight.castShadow = true;
        dirLight.shadow.camera.top = 2;
        dirLight.shadow.camera.bottom = - 2;
        dirLight.shadow.camera.left = - 2;
        dirLight.shadow.camera.right = 2;
        dirLight.shadow.camera.near = 0.1;
        dirLight.shadow.camera.far = 40;
        scene.add( dirLight );

        var mesh = new THREE.Mesh(  new THREE.PlaneBufferGeometry( 10, 10 ), 
                                    new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        // -- Animation Actions -- 
        var loader = new THREE.GLTFLoader();    // loader
        loader.load( 'src/Soldier.glb', function ( gltf ) {
            model = gltf.scene;
            // console.log(gltf)
            // console.log(model)
            scene.add( model );
            model.traverse( function ( object ) {
                if ( object.isMesh ) object.castShadow = true;
            } );
            //
            skeleton = new THREE.SkeletonHelper( model );
            skeleton.visible = false;
            scene.add( skeleton );
            //
            // createPanel();
            //
            var animations = gltf.animations;
            mixer = new THREE.AnimationMixer( model );
            idleAction = mixer.clipAction( animations[ 0 ] );
            runAction  = mixer.clipAction( animations[ 1 ] );
            poseAction = mixer.clipAction( animations[ 2 ] );
            walkAction = mixer.clipAction( animations[ 3 ] );
            actions = [ idleAction, runAction, poseAction, walkAction ]
            idleAction.play()
            
            walkAction.play()
            // walkAction.enabled = false
            // walkAction.setEffectiveTimeScale(0)
            walkAction.setEffectiveWeight(0)

            poseAction.play()
            // poseAction.enabled = false
            // poseAction.setEffectiveTimeScale(0)
            poseAction.setEffectiveWeight(0)

            runAction.play()
            // runAction.enabled = false
            // runAction.setEffectiveTimeScale(0)
            runAction.setEffectiveWeight(0)

            let div = document.createElement('div')
            div.id = 'btn_bar'
            div.innerHTML = `
                <div class='con_btn selected' onclick="change_action(0,'idleAction')">idleAction</div>
                <div class='con_btn' onclick="change_action(1,'runAction')">runAction</div>
                <div class='con_btn' onclick="change_action(2,'poseAction')">poseAction</div>
                <div class='con_btn' onclick="change_action(3,'walkAction')">walkAction</div>
            `
            document.body.appendChild(div)
            animate();
        } );

        // -- Animation Actions -- 

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2;
        renderer.shadowMap.enabled = true;
        container.appendChild( renderer.domElement );

        window.addEventListener( 'resize', onWindowResize, false );

        controller = new THREE.OrbitControls(camera, renderer.domElement)

        // animate()
    }
    function change_action(index,action){
        var aBtn = document.querySelectorAll('.con_btn')
        aBtn[selected_index].classList = 'con_btn'
        aBtn[index].classList = 'con_btn selected'
        // actions[selected_index].stop()
        // actions[index].play()

        // actions[selected_index].enabled = false;
        // actions[selected_index].setEffectiveTimeScale( 0 );
        // actions[selected_index].setEffectiveWeight( 0 );
        var weight = { w:0,lw:1 }
        const tween = new TWEEN.Tween(weight)
        .to({ w:1,lw:0 },500)
        .onUpdate(function(obj){
            // console.log(obj)
            // actions[selected_index].setEffectiveTimeScale( obj.lw );
            // actions[index].setEffectiveTimeScale( obj.w );
            actions[selected_index].setEffectiveWeight( obj.lw );
            actions[index].setEffectiveWeight( obj.w );
        })
        .start()
        .onComplete(function(){
            // console.log(1)
            // actions[selected_index].enabled = false;
            // actions[index].enabled = true;
            // actions[index].setEffectiveWeight( 1 );
            // actions[selected_index].setEffectiveWeight( 0 );
            selected_index = index
        })
        // actions[index].enabled = true;
        // actions[index].setEffectiveTimeScale( 1 );
        // actions[index].setEffectiveWeight( 1 );
        // actions[selected_index].setEffectiveWeight( 0 );
        // selected_index = index

        // action.enabled = true;
        // action.setEffectiveTimeScale( 1 );
        // action.setEffectiveWeight( weight );

    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    function animate() {
        TWEEN.update()
        // Render loop
        requestAnimationFrame( animate );
        controller.update()
        // idleWeight = idleAction.getEffectiveWeight();
        // walkWeight = walkAction.getEffectiveWeight();
        // runWeight = runAction.getEffectiveWeight();
        // // Update the panel values if weights are modified from "outside" (by crossfadings)
        // updateWeightSliders();
        // // Enable/disable crossfade controls according to current weight values
        // updateCrossFadeControls();
        // // Get the time elapsed since the last frame, used for mixer update (if not in single step mode)
        var mixerUpdateDelta = clock.getDelta();
        // // If in single step mode, make one step and then do nothing (until the user clicks again)
        // if ( singleStepMode ) {
        //     mixerUpdateDelta = sizeOfNextStep;
        //     sizeOfNextStep = 0;
        // }
        // // Update the animation mixer, the stats panel, and render this frame
        mixer.update( mixerUpdateDelta );
        // stats.update();
        renderer.render( scene, camera );
    }

</script>
</html>